@import './css-vars.less';

/******** borderSize *******/

@border-none: 0;
@border-1: 1px;
@border-2: 2px;
@border-3: 3px;
@border-4: 4px;
@border-5: 5px;

/******** borderStyle *******/

@border-solid: solid;
@border-dashed: dashed;
@border-dotted: dotted;

/******** radius *******/
@border-radius-default: 1px;
@border-radius-circle: 50%;

/******** shadow distance *******/

@shadow-distance-none: 0;
@shadow-distance-1: 1px;
@shadow-distance-2: 2px;
@shadow-distance-3: 3px;
@shadow-distance-4: 4px;

/******** size *******/

@size-none: 0;
@size-1: 4px;
@size-2: 8px;
@size-3: 12px;
@size-4: 16px;
@size-5: 20px;
@size-6: 24px;
@size-7: 28px;
@size-8: 32px;
@size-9: 36px;
@size-10: 40px;
@size-11: 44px;
@size-12: 48px;
@size-13: 52px;
@size-14: 56px;
@size-15: 60px;
@size-16: 64px;
@size-17: 68px;
@size-18: 72px;
@size-19: 76px;
@size-20: 80px;
@size-21: 84px;
@size-22: 88px;
@size-23: 92px;
@size-24: 96px;
@size-25: 100px;
@size-26: 104px;
@size-27: 108px;
@size-28: 112px;
@size-29: 116px;
@size-30: 120px;
@size-31: 124px;
@size-32: 128px;
@size-33: 132px;
@size-34: 136px;
@size-35: 140px;
@size-36: 144px;
@size-37: 148px;
@size-38: 152px;
@size-39: 156px;
@size-40: 160px;
@size-41: 164px;
@size-42: 168px;
@size-43: 172px;
@size-44: 176px;
@size-45: 180px;
@size-46: 184px;
@size-47: 188px;
@size-48: 192px;
@size-49: 196px;
@size-50: 200px;

@size-small: @size-5;
@size-default: @size-7;
@size-large: @size-9;

/******** spacing *******/

@spacing-none: 0;
@spacing-1: 1px;
@spacing-2: 2px;
@spacing-3: 4px;
@spacing-4: 6px;
@spacing-5: 8px;
@spacing-6: 10px;
@spacing-7: 12px;
@spacing-8: 16px;
@spacing-9: 20px;
@spacing-10: 24px;
@spacing-11: 32px;
@spacing-12: 36px;
@spacing-13: 40px;
@spacing-14: 48px;
@spacing-15: 56px;
@spacing-16: 60px;
@spacing-17: 64px;
@spacing-18: 72px;
@spacing-19: 80px;
@spacing-20: 84px;
@spacing-21: 96px;
@spacing-22: 100px;

@color-transparent: transparent;

/******** shadow *******/

@shadow-none: none;
@shadow-special: 0 0 1px rgba(0, 0, 0, 0.3);
@shadow1-center: 0 0 5px rgba(0, 0, 0, 0.1);
@shadow1-up: 0 -2px 5px rgba(0, 0, 0, 0.1);
@shadow1-down: 0 2px 5px rgba(0, 0, 0, 0.1);
@shadow1-left: -2px 0 5px rgba(0, 0, 0, 0.1);
@shadow1-right: 2px 0 5px rgba(0, 0, 0, 0.1);
@shadow1-left-up: -2px -2px 5px rgba(0, 0, 0, 0.1);
@shadow1-left-down: -2px 2px 5px rgba(0, 0, 0, 0.1);
@shadow1-right-up: 2px -2px 5px rgba(0, 0, 0, 0.1);
@shadow1-right-down: 2px 2px 5px rgba(0, 0, 0, 0.1);
@shadow2-center: 0 0 10px rgba(0, 0, 0, 0.1);
@shadow2-up: 0 -4px 10px rgba(0, 0, 0, 0.1);
@shadow2-down: 0 4px 10px rgba(0, 0, 0, 0.1);
@shadow2-left: -4px 0 10px rgba(0, 0, 0, 0.1);
@shadow2-right: 4px 0 10px rgba(0, 0, 0, 0.1);
@shadow2-left-up: -4px -4px 10px rgba(0, 0, 0, 0.1);
@shadow2-left-down: -4px 4px 10px rgba(0, 0, 0, 0.1);
@shadow2-right-up: 4px -4px 10px rgba(0, 0, 0, 0.1);
@shadow2-right-down: 4px 4px 10px rgba(0, 0, 0, 0.1);
@shadow3-center: 0 0 20px rgba(0, 0, 0, 0.1);
@shadow3-up: 0 -8px 20px rgba(0, 0, 0, 0.1);
@shadow3-down: 0 8px 20px rgba(0, 0, 0, 0.1);
@shadow3-left: -8px 0 20px rgba(0, 0, 0, 0.1);
@shadow3-right: 8px 0 20px rgba(0, 0, 0, 0.1);
@shadow3-left-up: -8px -8px 20px rgba(0, 0, 0, 0.1);
@shadow3-left-down: -8px 8px 20px rgba(0, 0, 0, 0.1);
@shadow3-right-up: 8px -8px 20px rgba(0, 0, 0, 0.1);
@shadow3-right-down: 8px 8px 20px rgba(0, 0, 0, 0.1);

/******** opacity *******/

@opacity-none: 0;
@opacity-1: 10%;
@opacity-2: 20%;
@opacity-3: 30%;
@opacity-4: 40%;
@opacity-5: 50%;
@opacity-6: 60%;
@opacity-7: 70%;
@opacity-8: 80%;
@opacity-9: 90%;
@opacity-10: 100%;

/******** fontSize *******/

@font-size-display-3: 56px;
@font-size-display-2: 48px;
@font-size-display-1: 36px;
@font-size-title-3: 24px;
@font-size-title-2: 20px;
@font-size-title-1: 16px;
@font-size-body-3: 14px;
@font-size-body-2: 13px;
@font-size-body-1: 12px;
@font-size-caption: 12px;

/******** fontWeight ********/
@font-weight-100: 100;
@font-weight-200: 200;
@font-weight-300: 300;
@font-weight-400: 400;
@font-weight-500: 500;
@font-weight-600: 600;
@font-weight-700: 700;
@font-weight-800: 800;
@font-weight-900: 900;

/******** Primary *******/

@color-primary-1: @blue-1;
@color-primary-2: @blue-2;
@color-primary-3: @blue-3;
@color-primary-4: @blue-4;
@color-primary-5: @blue-5;
@color-primary-6: @blue-6;
@color-primary-7: @blue-7;
@color-primary-8: @blue-8;
@color-primary-9: @blue-9;
@color-primary-10: @blue-10;

/******** success *******/

@color-success-1: @green-1;
@color-success-2: @green-2;
@color-success-3: @green-3;
@color-success-4: @green-4;
@color-success-5: @green-5;
@color-success-6: @green-6;
@color-success-7: @green-7;
@color-success-8: @green-8;
@color-success-9: @green-9;
@color-success-10: @green-10;

/******** warning *******/

@color-warning-1: @orange-1;
@color-warning-2: @orange-2;
@color-warning-3: @orange-3;
@color-warning-4: @orange-4;
@color-warning-5: @orange-5;
@color-warning-6: @orange-6;
@color-warning-7: @orange-7;
@color-warning-8: @orange-8;
@color-warning-9: @orange-9;
@color-warning-10: @orange-10;

/******** danger *******/

@color-danger-1: @red-1;
@color-danger-2: @red-2;
@color-danger-3: @red-3;
@color-danger-4: @red-4;
@color-danger-5: @red-5;
@color-danger-6: @red-6;
@color-danger-7: @red-7;
@color-danger-8: @red-8;
@color-danger-9: @red-9;
@color-danger-10: @red-10;

/******** gray *******/

@color-gray-1: @gray-1;
@color-gray-2: @gray-2;
@color-gray-3: @gray-3;
@color-gray-4: @gray-4;
@color-gray-5: @gray-5;
@color-gray-6: @gray-6;
@color-gray-7: @gray-7;
@color-gray-8: @gray-8;
@color-gray-9: @gray-9;
@color-gray-10: @gray-10;

/******** link *******/

@color-link-1: @dark-blue-1;
@color-link-2: @dark-blue-2;
@color-link-3: @dark-blue-3;
@color-link-4: @dark-blue-4;
@color-link-5: @dark-blue-5;
@color-link-6: @dark-blue-6;
@color-link-7: @dark-blue-7;
@color-link-8: @dark-blue-8;
@color-link-9: @dark-blue-9;
@color-link-10: @dark-blue-10;

// Other
@color-white: #ffffff;
@dark-color-white: fade(#fff, 90%); // 在亮色模式下所有白色文字对应。对应 @color-white;

@color-black: #000000;
@dark-color-black: #000000;

@mask-bg-opacity: @opacity-6;
@mask-color-bg: rgba(@gray-10, @mask-bg-opacity);
@dark-mask-color-bg: rgba(@dark-gray-1, @mask-bg-opacity);

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes scaning {
  to {
    transform: rotate(1turn);
  }
}

@keyframes upfade {
  0% {
    transform: translateY(3px, -12px);
  }
  50% {
    transform: translateY(4px, -12px);
  }
  100% {
    transform: translateY(5px, -12px);
  }
}
